<template>
  <div class="home" :style="bg">
    <div class="user">
      <div class="box">
        <img src="../assets/images/head.jpg" class="head" alt="我很帅吧" title="我很帅吧" />
        <img src="../assets/images/name.png" class="name" alt="名字也要个性的" title="名字也要个性的" />
        <router-link
          class="goAbout animated infinite flash"
          to="/artList"
        >Front-end Development Engineer</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "home",
  data() {
    return {
      bg: {
        backgroundImage: "url(" + require("../assets/images/bg1.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      }
    };
  },
  mounted() {
    this.$store.dispatch("setIsLogin", false);
    this.$store.dispatch("setToNum", "2");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.user {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.user .box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user .box .head {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.user .box .name {
  margin-left: 700px;
}
.user .box .goAbout {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
